<template>
    <div class="tab-control">
        <template v-for="(item,index) in titles" :key="index">
            <div  :class="currentIndex == index ? 'tab-control-itemxz':'tab-control-item'" @click="itemClick(index)">
            
            <slot :item="item">
              <span>{{item}}</span>
            </slot>
            </div>
        </template>
        
    </div>
  </template>

  
  <script>
    /* import { forMe } from "@/api/index";*/
    export default {
      //name 指定不重复即可
      name: "index",
      components: {
        //引入组件
      },
      emits:["tabItemClick"],
      props: {
        titles:{
            type: Array,
            default:()=>[]
        }
      },
      data() {
        return {
          //变量定义 放置数据值，相当于默认值 相似于js中全局变量
          currentIndex:-1
        };
      },
      activated() {
        //动态加载钩子函数 在该函数内调用的方法会有页面跳转路由
        //会再次重新获得生命周期
      },
      created() {
        //加载钩子函数 组件创建完成没有渲染时触发 获取页面数据 未加载DOM结构
        //相当于 jQ中加载函数
      },
      watch:{
        //监听
      },
      mounted() {
        //组件渲染之后触发 页面已获取数据 并且组件已渲染
        const str = 'abbcdddeaaaeee';
        // a2bc3de3a3e
      },
      methods: {
        itemClick(index) {
            this.currentIndex = index;
            this.$emit("tabItemClick",index)
        }
  
      },
    };
  </script>
    <style  scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
    .tab-control{
        display: flex;
        align-items: center;
        height: 44px;
        line-height: 44px;
        text-align: center;
    }
    .tab-control-item{
        flex:1;
    }
    .tab-control-itemxz{
        border-bottom: 1px solid red;
        color: red;
        padding: 8px;
        flex:1;
    }
  </style>
  <style>
    /*全局css 支持css3 可以改变elementUI组件的样式 样式调整在整个系统所有页面生效
      【警告注意: 可能会造成其他页面样式污染 需谨慎使用】 **/
  
  </style>